<template>
	<div v-show="isToastShow" @click="toastHide" class="comp-toast">
		<div>
			<p>{{ toastMessage }}</p>
		</div>
	</div>
</template>

<script>
	export default {
		'name': 'comp-toast',
		data() {
			return {
				'isToastShow': false,
				'toastTimeout': null,
				'defaultMessage': '',
				'defaultDuration': 2000
			};
		},
		'props': [
			'isShow',
			'message',
			'duration'
		],
		'computed': {
			toastMessage() {
				return this.message || this.defaultMessage;
			},
			toastDuration() {
				return this.duration || this.defaultDuration;
			}
		},
		'watch': {
			isShow(newIsShow) {
				this.isToastShow = !!newIsShow;
				if (this.isToastShow) {
					this.toastTimeout = setTimeout(() => {
						this.toastHide();
					}, this.toastDuration);
				}
			}
		},
		'methods': {
			toastHide() {
				clearTimeout(this.toastTimeout);
				this.isToastShow = false;
				this.$emit('hide');
			}
		}
	};
</script>

<style scoped type="text/scss">
	.comp-toast {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 100%;
		> div {
			position: relative;
			top: 50%;
			left: 0;
			text-align: center;
			p {
				display: inline-block;
				height: 3em;
				margin-top: -1.5em;
				padding: 0 1em;
				border-radius: 0.5em;
				color: #ffffff;
				line-height: 3em;
				background-color: rgba(0,0,0,0.8);
			}
		}
	}
</style>
